<template>
	<div class="login" :style="{backgroundImage: `url('${loginBg}')`}">
		<el-form @keyup.enter.native="submitForm(loginForm)" ref="loginForm" :model="formData" :rules="rules"
			class="login-form">
			<h3 class="title">{{title}}</h3>
			<el-form-item prop="username">
				<el-input type="text" v-model="formData.username" placeholder="账号">
					<template #prefix>
						<el-icon>
							<UserFilled />
						</el-icon>
					</template>
				</el-input>
			</el-form-item>
			<el-form-item prop="password">
				<el-input type="password" v-model="formData.password" show-password placeholder="密码">
					<template #prefix>
						<el-icon>
							<Lock />
						</el-icon>
					</template>
				</el-input>
			</el-form-item>
			<el-checkbox style="margin:0px 0px 25px 0px;">记住密码</el-checkbox>
			<el-form-item style="width:100%;">
				<el-button :loading="loading" @click="submitForm(loginForm)" type="primary" style="width:100%;">
					登录
				</el-button>
			</el-form-item>
		</el-form>
		<!--  底部  -->
		<div class="el-login-footer">
			<span>{{footerContent}}</span>
		</div>
	</div>
</template>

<script setup lang="ts">
	import { computed, ref, reactive } from 'vue';
	import { UserFilled, Lock } from '@element-plus/icons-vue';
	import { ElMessage, FormInstance } from 'element-plus';
	import request from '../../utils/request';
	import { md5Encrypt, random } from '../../utils/util';
	import cookie from 'js-cookie';
	import { jwtDecode } from 'jwt-decode';
	import { useRouter } from 'vue-router';
	const router = useRouter();
	// 是否登录加载中
	const loading = ref(false);
	//表单绑定对象
	const formData = reactive({
		username: '',
		password: ''
	});
	//背景图片
	const loginBg = ref(`/images/login/bg${random(1, 5)}.jpg`);
	//表单验证
	const rules = reactive({
		username: [{ required: true, message: '请输入用户名！', trigger: ['blur', 'change'] }],
		password: [{ required: true, message: '请输入密码！', trigger: ['blur', 'change'] }],
	});
	//表单实例
	const loginForm = ref(null);
	//项目标题
	const title = computed(() => {
		const text = document.title;
		return text;
	});
	//底部内容
	const footerContent = computed(() => {
		const oldDate = 2018;
		const newDate = new Date().getFullYear();
		return `Copyright © ${oldDate}-${newDate} xinghuojinxiaocun.vip All Rights Reserved.`;
	});
	//提交表单
	const submitForm = async (formEl : FormInstance | undefined) => {
		if (!formEl) return;
		loading.value = true;
		await formEl.validate(async (valid, fields) => {
			if (valid) {
				const result = await request({
					url: '/auth/login',
					data: formData,
					method: 'post'
				});
				//
				console.log('submitForm--->', result);
				if (result.data.code !== 200) {
					//
					ElMessage.error({
						showClose: true,
						message: result.data.msg
					});
					//
					loading.value = false;
					return;
				}
				cookie.set('token', result.data.data.access_token);
				//
				ElMessage.success({
					showClose: true,
					message: '登录成功！'
				});
				//
				loading.value = false;
				//
				router.push('/f-business');
				setTimeout(() => {
					location.reload();
				}, 1000);
			} else {
				//
				console.log('error submit!', fields);
				loading.value = false;
			}
		})
	}
</script>

<style>

</style>

<style scoped lang="scss">
	.login {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100vw;
		height: 100vh;
		background-repeat: no-repeat;
		background-position: center;
		background-size: 100%;
		user-select: none;
	}

	.title {
		margin: 0px auto 30px auto;
		text-align: center;
		color: #666;
	}

	.login-form {
		border-radius: 6px;
		border: 1px solid #ebf5ff;
		background: #ffffff;
		width: 400px;
		padding: 25px 25px 5px 25px;

		.el-input {
			height: 38px;

			input {
				height: 38px;
			}
		}

		.input-icon {
			height: 39px;
			width: 14px;
			margin-left: 2px;
		}
	}

	.login-tip {
		font-size: 13px;
		text-align: center;
		color: #bfbfbf;
	}

	.login-code {
		width: 33%;
		height: 38px;
		float: right;

		img {
			cursor: pointer;
			vertical-align: middle;
		}
	}

	.el-login-footer {
		height: 40px;
		line-height: 40px;
		position: fixed;
		bottom: 0;
		width: 100%;
		text-align: center;
		color: #fff;
		font-family: Arial;
		font-size: 12px;
		letter-spacing: 1px;
	}

	.login-code-img {
		height: 38px;
	}
</style>